<template>
	<view class="content">
		<view class="details">
			<view class="details-wrap">
				<view class="cell">
					<view class="list">
						<view class="cell-wrap">
							<view class="cell-l">
								<image class="bgimage" src="../../static/emptyCart.jpg" mode=""></image>
							</view>
							<view class="cell-r">
								<view>资产包数量：{{detail.num}}</view>
								<view>兑换所需{{detail.type==1?'消费积分':'消费奖励'}}：{{detail.start_purchase}}</view>
								<view class="flex_">
									<view>释放个数：{{detail.max_purchase}} <text style="margin-left: 15px;">释放比例：{{detail.interest}}</text></view>
									<view class="exchange" >{{detail.type_name}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="info">
					<view class="title">资产包说明</view>
					<view>

					</view>
				</view>
				<view class="exchange1" @click="confirmPay">
					立即兑换
				</view>
				<modal ref="pwd" title="温馨提示" style="padding: 10px;" class="log" width="500rpx">
					<view class="inputContain">
						支付密码：<input type="password" :maxlength="8" @input="inputChange" placeholder="请输入支付密码" :value="payPwd" />
					</view>
					<view class="paybtn" @click="exchange">
						支付
					</view>
				</modal>
			</view>
		</view>
	</view>
</template>

<script>
	import modal from "@/components/myModal/myModal.vue"
	export default {
		components: {
			modal
		},
		data() {
			return {
				detail: {},
				payPwd: ''
			}
		},
		onLoad(options) {
			this.detail = uni.getStorageSync('cashdetail')
			uni.removeStorageSync('cashdetail')
		},
		methods: {
			inputChange(e) {
				this.payPwd = e.detail.value
			},
			confirmPay() {
				this.$refs.pwd.open()
			},
			exchange() {
				console.log('1')
				let that = this;
				if (!this.payPwd) {
					this.$api.msg('请输入支付密码')
					return;
				}
				uni.request({
					url: 'https://www.ggshop1688.com/api/conduct/exchange',
					data: {
						conductId: this.detail.id,
						payPwd:this.payPwd
					},
					method: 'POST',
					header: {
						token: uni.getStorageSync('userInfo').token
					},
				}).then(data => {
					this.$refs.pwd.close()
					that.$api.msg(data[1].data.msg)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mask{
		z-index: 100;
	}
	.dialog {
		padding: 10px 10px 0px 10px !important;
	}

	.inputContain {
		padding: 10px 0px;
		display: flex;
		align-items: center;
	}

	.paybtn {
		font-size: 14px;
		text-align: center;
		border-top: 1px solid #f2f2f2;
		padding: 10px 0px;
	}

	.details {
		font-size: 12px;
		background-color: #f2f2f2;
		height: 100vh;

		.cell {
			width: 100%;
			padding: 20upx;

			.list {
				border: 1px solid #f2f2f2;
				border-radius: 7px;
				padding: 20upx;
				background-color: #fff;

				.cell-wrap {
					display: flex;

					.cell-l {
						width: 160upx;
						height: 160upx;
						margin-right: 20upx;

						.bgimage {
							width: 100%;
							height: 100%;
						}
					}

					.cell-r {
						width: 73%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.flex_ {
							display: -webkit-box;
							display: -webkit-flex;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.exchange {
								width: 140upx;
								border-radius: 3px;
								height: 40upx;
								line-height: 40upx;
								background-color: #027aff;
								color: #fff;
								text-align: center;
							}
						}
					}
				}
			}
		}

		.info {
			margin: 20upx;
			border: 1px solid #999;
			height: 800upx;
			border-radius: 20upx;

			.title {
				text-align: center;
				padding: 20upx;
			}
		}

		.exchange1 {
			margin: 0 auto;
			width: 200upx;
			background-color: #027aff;
			color: #fff;
			padding: 14upx 0upx;
			text-align: center;
			border-radius: 7px;
		}
	}
</style>
